import React from 'react';
import ReactDOM from 'react-dom';
import { Form, Input, Row, Col, Button, Icon } from 'antd'
const FormItem = Form.Item;
import ChargeManageActions from './actions/chargeManageActions';


let uuid = 0;
let ladderList=[];
const Demo = React.createClass({
  getInitialState(){
    return {
      priceStatus:'1',
      renderBox:null,
      params:[],
      ladderArry:[0], //阶梯数组,记录行
      ladderList:[],
      price:''
    }
  },
  componentDidMount(){
    this.switchBox({priceStatus:this.state.priceStatus})
  },
  componentWillReceiveProps(nextProps){
    this.switchBox({priceStatus:nextProps.priceStatus})
    this.setState({
      priceStatus: nextProps.priceStatus,
    });
  },

  // 获取输入框的值
  handleChange(e){
    let name = e.target.name;
    let params = this.state.params;
    let ladderList = this.state.ladderList;
    let id = e.target.id
    let paramsId = parseInt(id.replace(/[^0-9]+/g, ''));

    let flag = false; // 不存在该条数据

    // 寻找已有数据params，查询是否存在key等于paramsId的记录
    if(params){
      params.forEach((item) =>{
        if(item.key ==  paramsId){
          flag = true;
          item[name] = e.target.value;
          return;
        }
      });
    }
    

    if(flag == false){// 不存在该条数据，则在数组params中追加一条数据
      let obj ={
        key:'',
        ladderStart:'',
        ladderEnd:'',
        price:''
      };
      obj[name] = e.target.value;
      obj.key = paramsId;
      params.push(obj);
    }else{ // 存在该条数据，则替换已有内容

    }

    ladderList.ladderList = params

    this.setState({
      params: params,
      ladderList: ladderList
    })
    ChargeManageActions.getLadderParams({ladderParams: this.state.ladderList});
  },
  handleChange1(e){
    let price = this.state.price;
    let obj = {
      price:''
    }
    obj.price = e.target.value;
    ChargeManageActions.getLadderParams({ladderParams: obj});
  },

  switchBox(val){
    let renderBox = '';
    let ladderArry = this.state.ladderArry;
    if(val.ladderArry){
      ladderArry = val.ladderArry;
    }
    switch (val.priceStatus) {
      case '1':
        renderBox = this.normalBox();
        break;

      case '2':
        renderBox = this.ladderBox(ladderArry);
        break;

      case '3':
        renderBox = this.normalBox();
        break;
    }
    this.setState({
      renderBox: renderBox,
      ladderArry: ladderArry
    });
  },
  // 正常收费
  normalBox(){
    return (
      <span>
        <Input type="text" id="price"  onChange ={this.handleChange1} style={{width:200}}  />元
      </span>
    );
  },
  // 阶梯收费
  addLadder() {
    uuid++;
    let keys = this.state.ladderArry;

      keys = keys.concat(uuid);
    let ladderList = this.state.ladderList;
    this.setState({
      ladderArry: keys
    });
    let val = {
      ladderArry: keys,
      priceStatus: this.state.priceStatus
    }
    this.switchBox(val);

  },
  removeLadder(k) {
    let keys = this.state.ladderArry;
    let ladderList = this.state.ladderList;
    let params = this.state.params;
    keys = keys.filter((key) => {
      return key !== k.k;
    });
    params = params.filter((key) => {
      return key.key !== k.k;
    });

    this.setState({
      ladderArry: keys
    });
    let val = {
      ladderArry: keys,
      priceStatus: this.state.priceStatus
    }
    this.switchBox(val);

    ladderList.ladderList = params;
    this.setState({
      params:params,
      ladderList: ladderList
    });
    ChargeManageActions.getLadderParams({ladderParams: this.state.ladderList});

  },
  ladderBox(val){
    const formItems = val.map((k) => {
      let ladderStart = `ladderStart${k}`;
      let ladderEnd = `ladderEnd${k}`;
      let price = `price${k}`;
      return (
        <Row gutter={16} key={k} >
          <Col className="gutter-row" span={5}>
            <div className="gutter-box" >
              <Input type="text"  id={ladderStart} name="ladderStart" onChange={this.handleChange}/>
            </div>
          </Col>
          <Col className="gutter-row" span={5}>
            <div className="gutter-box">
              <Input type="text" id={ladderEnd} name="ladderEnd"   onChange={this.handleChange}/>
            </div>
          </Col>
          <Col className="gutter-row" span={5}>
            <div className="gutter-box">
              <Input type="text" id={price}  name="price" onChange={this.handleChange}/>
            </div>
          </Col>
          <Col className="gutter-row" span={5}>
            <div className="gutter-box">
              <Button type="ghost" onClick={this.removeLadder.bind(this, {k})}><Icon type="delete" />删除</Button>
            </div>
          </Col>
        </Row>
      );
    });


    return (
      <div>
        <div className="row-table" >
          <Row className="table-title" gutter={24}>
            <Col className="gutter-row" span={5} >
              <div className="gutter-box">阶梯开始梯度</div>
            </Col>
            <Col className="gutter-row" span={5}>
              <div className="gutter-box">阶梯结束梯度</div>
            </Col>
            <Col className="gutter-row" span={5}>
              <div className="gutter-box">单价</div>
            </Col>
            <Col className="gutter-row" span={5}>
              <div className="gutter-box">操作</div>
            </Col>
          </Row>

          {formItems}

          <Row gutter={24}>
            <Col className="gutter-row" span={5} >
              <Button type="ghost" onClick={this.addLadder} ><Icon type="plus" />新增</Button>
            </Col>

          </Row>
        </div>
      </div>
    );
  },
  render () {
    return (
      <div className="ant-form-item">
        {this.state.renderBox}
      </div>
    );
  }
});

export default Demo